<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <!-- 引入刚刚下载的 ECharts 文件 -->

    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../component/pear/css/pear.css" />
    <link rel="stylesheet" href="../../admin/css/other/console1.css" />
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.0/echarts.js"></script>
</head>

<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<body class="pear-container">
<div class="layui-row layui-col-space10">
    <div class="layui-col-md6">
        <div class="layui-card">
            <div class="layui-card-body">
                <div id="salechart" style="width: 800px;height:600px;"></div>
            </div>
        </div>
    </div>
    <div class="layui-col-md6">
        <div class="layui-card">
            <div class="layui-card-body">
                <div id="echarts-records" style="background-color:#ffffff;height:600px;padding: 10px"></div>
            </div>
        </div>
    </div>

</div>
</body>
<script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="../../component/layui/layui.js"></script>
<script src="../../component/pear/pear.js"></script>

<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('salechart'));


    $(document).ready(function() {

        $.ajax({

            url: "http://localhost:8080/dreamgame/game/echart",

            async: true,

            dataType: "json",

            type: "get",

            success: (r) => {

                console.log(r.data.typeNames);

                // 指定图表的配置项和数据
                myChart.setOption({
                    title: {
                        text: '游戏销量图',
                        subtext: '',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} '
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left'
                    },
                    series: [
                        {
                            name: '游戏销量',
                            type: 'pie',
                            radius: '50%',
                            data: r.data.gameValues,

                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                });
                // 使用刚指定的配置项和数据显示图表。
            }
        })



    })


    var echartsRecords = echarts.init(document.getElementById('echarts-records'));

    let xdata = [];
    let ydata = [];


    $.ajax({
        url: 'http://localhost:8080/dreamgame/order/ordercount',
        type: 'GET',
        dataType: 'json',
        async: false,
        success: function(res){
            console.log(res);
            //遍历数组
            $.each(res.data,function(index,o){
                console.log(o);
                //xdata 时间
                xdata.push(o.cdays);
                //ydata 数据
                ydata.push(o.count);
            });

        }

    });

    console.log(xdata+","+ydata);

    var option = {


        title: {
            text: '近6天订单数图',
            subtext: '',
            left: 'center'
        },
        tooltip: {
            trigger: 'axis'
        },
        //x轴  data: ['2019-01', '2019-02', '2019-03', '2019-04', '2019-05', '2019-06'],

        xAxis: [{
            type: 'category',
            data: xdata,
            axisLine: {
                lineStyle: {
                    color: "#999"
                }
            }
        }],
        //y轴样式
        yAxis: [{
            type: 'value',
            splitNumber: 4,
            splitLine: {
                lineStyle: {
                    type: 'dashed',
                    color: '#DDD'
                }
            },
            axisLine: {
                show: false,
                lineStyle: {
                    color: "#333"
                },
            },
            nameTextStyle: {
                color: "#999"
            },
            splitArea: {
                show: false
            }
        }],
        //y轴数据  data: [23, 60, 20, 36, 123, 85],
        series: [{
            name: '订单数',
            type: 'line',
            data: ydata,
            lineStyle: {
                normal: {
                    width: 8,
                    color: {
                        type: 'linear',

                        colorStops: [{
                            offset: 0,
                            color: '#A9F387' // 0% 处的颜色
                        }, {
                            offset: 1,
                            color: '#48D8BF' // 100% 处的颜色
                        }],
                        globalCoord: false // 缺省为 false
                    },
                    shadowColor: 'rgba(72,216,191, 0.3)',
                    shadowBlur: 10,
                    shadowOffsetY: 20
                }
            },
            itemStyle: {
                normal: {
                    color: '#fff',
                    borderWidth: 10,
                    /*shadowColor: 'rgba(72,216,191, 0.3)',
                    shadowBlur: 100,*/
                    borderColor: "#A9F387"
                }
            },
            smooth: true
        }]
    };
    echartsRecords.setOption(option);

    window.onresize = function() {
        echartsRecords.resize();
    }

</script>
</body>
</html>